<template>
  <div class="myPending" v-loading="loading">
    <div class="flex justify-around items-center w-full h-full">
      <div class="left">
        <svg-icon :icon-class="data[name].icon" class="text-60px"></svg-icon>
      </div>
      <div class="right" @click="toPage(name)">
        <div class="text-25px font-bold color-#e6a23c">{{ num }}</div>
        <div class="text-14px">{{ data[name].title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getTodoMessageList } from '@/api/businessSettings/agent'
import { listNotice } from '@/api/system/notice'
const router = useRouter()
const proxy = getCurrentInstance()
const data = {
  work: {
    icon: '工单',
    title: '待处理工单'
  },
  task: {
    icon: '任务',
    title: '待处理任务'
  },
  process: {
    icon: '流程',
    title: '待审批流程'
  },
  notice: {
    icon: '公告',
    title: '待阅读公告'
  },
  test: {
    icon: '清单',
    title: '预留'
  }
}

const num = ref(0)
const loading = ref(false)
const props = defineProps({
  name: {
    type: String
  }
})
const queryParams = ref({
  serviceType: 26,
  handleFlag: 0,
  pageNum: 1,
  pageSize: 10
})

// const timer = ref(null)
// onMounted(() => {
//   timer.value = setInterval(() => {
//     init()
//   }, 60 * 1000)
// })

// onBeforeUnmount(() => {
//   clearInterval(timer.value)
// })

// onActivated(() => {
//   timer.value = setInterval(() => {
//     init()
//   }, 60 * 1000)
// })

// onDeactivated(() => {
//   clearInterval(timer.value)
// })
function init() {
  loading.value = true
  if (queryParams.value.businessId) {
    delete queryParams.value.businessId
  }
  if (props.name === 'notice') {
    listNotice({
      pageNum: 1,
      pageSize: 8,
      isRead: 'N'
    })
      .then(res => {
        num.value = res.total
      })
      .finally(() => {
        loading.value = false
      })
    return
  }
  if (props.name === 'task') {
    queryParams.value.serviceType = 10
  }
  if (props.name === 'process') {
    delete queryParams.value.serviceType
    queryParams.value.businessId = 'Yprocess'
  }
  getTodoMessageList(queryParams.value)
    .then(res => {
      num.value = res.total
    })
    .finally(() => {
      loading.value = false
    })
}
function toPage(name) {
  if (name === 'notice') {
    router.push({
      path: '/rsgl/other/notice',
      query: { isRead: 'N' }
    })
  } else {
    router.push({
      path: '/rsgl/other/agent',
      query: {
        serviceType:
          props.name === 'process'
            ? queryParams.value.businessId
            : queryParams.value.serviceType
      }
    })
  }
}

init()
</script>

<style scoped lang="scss">
.myPending {
  height: 100%;
  box-shadow: 0px 0px 6px 0px rgb(220 206 206);
  border-radius: 5px;
  padding: 15px;
  position: relative;
  .right {
    cursor: pointer;
  }
}
</style>
